<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="csrf-token" content="{:token()}">
    <link rel="stylesheet" href="{__STATIC_PATH__}admin/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="{__STATIC_PATH__}admin/css/public.css" media="all">
    <style>
        .inoutCls {
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            font-size: 12px;
            background-color: #1E9FFF;
            max-width: 80px;
            border: none;
            color: #fff;
            margin-left: 10px;
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <button type="button" class="layui-btn add">添 加</button>
        {if !empty($category)}
        <a class="layui-btn layui-btn-normal" href="{:url('category/index')}?pid={$category.pid}">返回上一级</a>
        {/if}
        <div class="layui-form" style="margin-top: 20px;">
            <table class="layui-table">
                <colgroup>
                    <col width="50">
                    <col width="110">
                    <col width="110">
                    <col width="90">
                    <col width="130">
                    <col width="130">
                    <col width="90">
                    <col width="90">
                    <col width="130">
                </colgroup>
                <thead>
                <tr>
                    <th>分类ID</th>
                    <th>分类名</th>
                    <th>URL KEY</th>
                    <th>排序</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作人</th>
                    <th>状态</th>
                    <th>操作管理</th>
                </tr>
                </thead>
                <tbody>
                {if !empty($result) && count($result.data) > 0}
                {foreach $result.data as $item}
                <tr>
                    <td>{$item.id}</td>
                    <td><input type="text" autocomplete="off" class="layui-input" value="{$item.name}" onchange="editCls(this, {$item.id}, 'name')"></td>
                    <td><input type="text" autocomplete="off" class="layui-input" value="{$item.url_key}" onchange="editCls(this, {$item.id}, 'url_key')"></td>
                    <td><input type="text" autocomplete="off" class="layui-input" value="{$item.list_order}" onchange="editCls(this, {$item.id}, 'list_order')"></td>
                    <td>{$item.created_time}</td>
                    <td>{$item.updated_time}</td>
                    <td>{$item.operate_user}</td>
                    <td data-id="{$item.id}">
                        <input type="checkbox" {if $item.status == 1} checked="checked" {/if} name="status" lay-skin="switch"
                                           lay-filter="switchTest"
                                           lay-text="ON|OFF">
                    <td>
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete del-child"
                           lay-event="delete" data-id="{$item.id}">删除</a>
                    {if $item.childCount > 0}
                        <a class="layui-btn layui-btn-xs layui-btn-warm" href="{:url('category/index')}?pid={$item.id}">查看子分类({$item.childCount})</a>
                    {/if}
                    </td>
                </tr>
                {/foreach}
                {/if}
                </tbody>
            </table>
        </div>
        <div id="pages"></div>
    </div>

</div>
<script src="{__STATIC_PATH__}admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="{__STATIC_PATH__}admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="{__STATIC_PATH__}admin/js/common.js?v5" charset="utf-8"></script>
<script src="{__STATIC_PATH__}admin/js/global.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'laypage'], function () {
        var form = layui.form
            , laypage = layui.laypage;
        {if !empty($result)}
        var r = window.location.search.substr(1).match(/page=(\d)/);
        var page = 1;
        if (r != null) page = decodeURIComponent(r[1]);

        laypage.render({ //分页
            elem: 'pages', //分页的标签的id
            count: {$result.total}, //总条数
            theme: '#FFB800', //按钮的颜色
            limit: {$result.per_page}, //每页的条数
            curr: page,
            jump: function(obj, first){
                // first为是不是第一次进入
                if (first) {
                    return false;
                }
                if (window.location.search != "") {
                    window.location.href = window.location.href.replace(/&page=(\d)/g, "") + "&page=" + obj.curr;
                }else{
                    window.location.href = window.location.href + "?timestamp=" + (new Date().getTime()) + "&page=" + obj.curr;
                }
            }
        });
        {/if}
        // 添加 分类
        $('.add').on('click', function () {
            layObj.dialog('add.html')
        });

        //状态 更改
        form.on('switch(switchTest)', function (obj) {
            let id = obj.othis.parent().attr('data-id');
            let status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: "{:url('category/update')}",
                data: {id: id, field: "status", val: status},
                type: "post",
                success: (res) => {
                    layer.msg(res.message);
                    window.location.reload();
                },
                error: (err) => {
                    layer.msg("更新失败，请重试");
                    console.log(err);
                }
            });
            return false;
        });
        //修改
        window.editCls = function (that, id, type) {
            let val = $(that).val();
            if (!val && type == "name") {
                return layObj.msg('分类名称不能为空');
            }
            if (!val && type == "list_order") {
                return layObj.msg('排序不能为空');
            }else if (val && type == "list_order" && isNaN(val)) {
                return layObj.msg('排序必须为数字');
            }
            if (!val && type == "url_key") {
                return layObj.msg('URL KEY不能为空');
            }else if (val && type == "url_key" && !/^[A-Za-z0-9_\-]+$/g.test(val)) {
                return layObj.msg('URL KEY必须为A-Za-z0-9_-');
            }

            $.ajax({
                url: "{:url('category/update')}",
                data: {id: id, field: type, val: val},
                type: "post",
                success: (res) => {
                    layer.msg(res.message);
                    window.location.reload();
                },
                error: (err) => {
                    layer.msg("更新失败，请重试");
                    console.log(err);
                }
            });
        }



        // 删除
        $('.del-child').on('click', function () {
            let id = $(this).attr('data-id'); // fu
            layObj.box(`是否删除分类`, () => {

                $.ajax({
                    url: "{:url('category/delete')}?id=" + id,
                    success: (res) => {
                        layer.msg(res.message);
                        window.location.reload();
                    },
                    error: (err) => {
                        layer.msg("删除失败，请重试");
                        console.log(err);
                    }
                });

            })
        });
    });
</script>
</body>
</html>
